<template>
  <div class="mybody">
    <div class="top">
      <div class="main">
        <el-row>
          <el-col :span="8" class="imgbox">
            <img
                class="detailImg"
                :src="detail.pimg"
            />
          </el-col>
          <el-col :span="14" style="padding: 20px">

            <h3>{{ detail.ptitle }}</h3>
            <p>{{ detail.psubhead }}</p>
            <p>发布时间：{{ detail.createdate }}</p>

            <el-button type="danger" round @click="openDalog">我想领养它</el-button>

          </el-col>

        </el-row>
      </div>
      <div v-html="detail.pdetail" class="deal"></div>
<!--      <p>{{ detail.pdetail }}</p>-->


    </div>
  </div>

  <div class="dalog">
    <el-dialog v-model="dialog">
      <el-form
          label-position="right"
          label-width="100px"

          style="max-width: 350px"
      ><h3>恭喜领养成功</h3>
        <p>请联系:{{ detail.pname }}</p>
        <p>联系电话：{{ detail.piphone }}</p>
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="dialog = false">
          确认
        </el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "PetDetail",
  data() {
    return {
      detail: {},
      pid: 1,
      dialog: false,
    }
  },
  methods: {
    openDalog() {
      this.$checkLogin()
      let user = JSON.parse(localStorage.getItem("user"))
      if (user !== null && user.isreal === 2) {
        this.dialog = true
      } else {
        ElMessage.error('请先实名认证')
      }
    }
  },
  mounted() {
    this.pid = this.$route.params.pid
    doThis.doGet("/pet/id", {pid: this.pid}).then(res => {
      console.log(res.data)
      this.detail = res.data
    })
  }
}
</script>

<style scoped>
.mybody {
  background: #f5f5f5;
}

.top {
  width: 1200px;
  margin: 0 auto;
  background: white;

}

.detailImg {
  width: 100%;
}

.deal{
  margin: 0 30px;
}
</style>